<template>
  <div class="comment-post">
    <van-field
      class="post-field"
      v-model="message"
      rows="2"
      autosize
      type="textarea"
      maxlength="50"
      placeholder="优质评论将会被优先展示"
      show-word-limit
    />
    <van-button
      type="primary"
      plain
      class="post-btn"
      size="small"
      @click="onAddComment"
    >发布</van-button>
  </div>
</template>

<script>
import { addComment } from '@/api/comment'
export default {
  name: 'CommentPost',
  components: {},
  props: {
    // 文章ID  或者 评论ID
    target:{
      type:[String,Number,Object],
      required:true
    },
    // 评论、回复 列表数据
    list:{
      type:Array,
      required:true
    },
    // 文章ID: 做文章评论的时候是不需要的，做评论回复的时候是需要
    art_id:{
      type:[String,Object,Number],
      default:null
    }
  },
  data () {
    return {
      message: ''
    }
  },
  methods: {
    async onAddComment(){
      let content = this.message
      if(!content){
        return this.$toast.fail('请输入内容')
      }
      try {
        let { data:res } = await addComment({
          target: this.target,  // 目标ID  文章评论就交文章ID；评论回复就交评论ID
          content,     // 发布的内容
          art_id:this.art_id  // 文章评论功能则不需要交；评论回复功能则交文章ID
        })
        this.$toast.success('评论成功')
        // 更新视图 
        // 将最新的评论放到列表的顶部
        this.list.unshift(res.data.new_obj)
        // 更新评论总数
        this.$emit('update-comment-total')
        // 关闭弹框，清空数据
        this.message = ''
        this.$emit('close')
      } catch (error) {
        this.$toast.fail('评论失败')
      }

    }
  }
}
</script>

<style scoped lang="less">
.comment-post{
  display: flex;
  padding: 25px;
  align-items: center;
  .post-field {
    background: #f5f7f9;
    margin-right: 15px;
  }
  .post-btn{
    width: 120px;
    border: none;
    padding: 0;
    color: #6ba3d8;
  }
}
</style>
